<template>
  <div>
    <el-tabs v-model="current" tab-position="left">
      <el-tab-pane name="0" label="优惠券">
        <el-tag
            :type="item.type"
            closable
            @close="onclose(index)"
            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; margin-right: 25px;"
            v-for="(item, index) in tag"
            :key="index"
        >
          {{ item.text }}
        </el-tag>
        <el-form ref="couponForm" :model="couponForm" :rules="couponRule"
                 style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item label="优惠券链接前缀" prop="appId">
            <el-input v-model="couponForm.paramMap.url" autocomplete="off" placeholder="请输入URL"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import request from "@/common/request"

export default {
  data() {
    return {
      current: "0",
      formData: {},
      couponForm: {
        bindCode: "COUPON",
        bindDetail: "",
        groupCode: "",
        id: "",
        paramMap: {
          url: "",
        },
      },
      couponRule: {
        "paramMap.url": [{required: true, message: "请输入URL", trigger: "blur"}],
      },
      tag: [
        {
          type: "primary",
          text: "例如 www.xxx.com ",
        },
      ],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const {data} = await request("get", "/system/configApi/list")
      const coupon = data.find(item => item.bindCode === "COUPON")
      console.log('coupon',coupon)
      if (coupon) {
        this.couponForm = {
          bindCode: "COUPON",
          bindDetail: coupon.bindDetail,
          groupCode: coupon.groupCode,
          id: coupon.id,
          paramMap: {
            url: coupon.paramMap.url,
          },
        }
      }


    },
    async onSubmit() {
      const refs = [this.$refs.couponForm]
      const formData = [this.couponForm][this.current]
      refs[this.current].validate(async valid => {
        if (valid) {
          formData.bindDetail = JSON.stringify(formData.paramMap)
          const {code, msg} = await request("post", "/system/configApi/edit", formData)
          if (code === 0) {
            this.$message.success("保存成功")
          } else {
            this.$message.error(msg)
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped></style>
